<template>
  <a-sub-menu key="sub1">
    <template #title>
      <span>
        <user-outlined />
        基础
      </span>
    </template>
    <router-link to="/CreateNewVue">
      <a-menu-item key="1">创建一个应用</a-menu-item>
    </router-link>
    <router-link to="/templateVue">
      <a-menu-item key="2">模板语法</a-menu-item>
    </router-link>
    <router-link to="/ResponsiveFoundation">
      <a-menu-item key="3">响应式基础 </a-menu-item>
    </router-link>
    <router-link to="/ComputedVue">
      <a-menu-item key="4">计算属性</a-menu-item>
    </router-link>
    <router-link to="/ClassStyleVue">
      <a-menu-item key="5">Class style</a-menu-item>
    </router-link>
    <router-link to="/ConditionalRendering">
      <a-menu-item key="6">条件渲染</a-menu-item>
    </router-link>
    <router-link to="/ListRendering">
      <a-menu-item key="7">列表渲染</a-menu-item>
    </router-link>
    <router-link to="/EventProcessing">
      <a-menu-item key="8">事件渲染</a-menu-item>
    </router-link>
    <router-link to="/FormBinding">
      <a-menu-item key="9">表单输入绑定</a-menu-item>
    </router-link>
    <router-link to="/LifeCycle">
      <a-menu-item key="10">生命周期</a-menu-item>
    </router-link>
    <router-link to="/WatchVue">
      <a-menu-item key="11">监听器</a-menu-item>
    </router-link>
    <router-link to="/TemplateReferenceVue">
      <a-menu-item key="12">模板引用</a-menu-item>
    </router-link>
    <router-link to="/ComponentParent">
      <a-menu-item key="13">组件基础</a-menu-item>
    </router-link>
  </a-sub-menu>
  <a-sub-menu key="sub2">
    <template #title>
      <span>
        <laptop-outlined />
        深入组件
      </span>
    </template>
    <router-link to="/RegisterVue">
      <a-menu-item key="14">注册</a-menu-item>
    </router-link>
    <router-link to="/propsVue">
      <a-menu-item key="15">props</a-menu-item>
    </router-link>
    <router-link to="/eventVue">
      <a-menu-item key="16">事件</a-menu-item>
    </router-link>
    <router-link to="/ModelVue">
      <a-menu-item key="17">组件 v-model</a-menu-item>
    </router-link>
    <router-link to="/PenetrateAttrbuitesVue">
      <a-menu-item key="18">透传 Attrbuites</a-menu-item>
    </router-link>
    <router-link to="/slotsVue">
      <a-menu-item key="19">插槽 slots</a-menu-item>
    </router-link>
    <router-link to="/DependencyInjection">
      <a-menu-item key="20">依赖注入</a-menu-item>
    </router-link>
    <router-link to="/DefineComponentVue">
      <a-menu-item key="21">异步组件</a-menu-item>
    </router-link>
  </a-sub-menu>
  <a-sub-menu key="sub3">
    <template #title>
      <span>
        <notification-outlined />
        逻辑复用
      </span>
    </template>
    <router-link to="/ComposablesVue">
      <a-menu-item key="21">组合式函数</a-menu-item>
    </router-link>
    <router-link to="/CustomDirectivesVue">
      <a-menu-item key="22">自定义指令</a-menu-item>
    </router-link>
    <router-link to="/plugins">
      <a-menu-item key="23">自定义插件</a-menu-item>
    </router-link>
  </a-sub-menu>
  <a-sub-menu key="sub4">
    <template #title>
      <span>
        <notification-outlined />
        内置组件
      </span>
    </template>
    <router-link to="/TransitionVue">
      <a-menu-item key="21">动画</a-menu-item>
    </router-link>
    <router-link to="/KeepAliveVue">
      <a-menu-item key="22">KeepAlive</a-menu-item>
    </router-link>
    <router-link to="/TeleportVue">
      <a-menu-item key="23">Teleport</a-menu-item>
    </router-link>
    <router-link to="/SuspenseVue">
      <a-menu-item key="24">SuspenseVue</a-menu-item>
    </router-link>
  </a-sub-menu>
  <a-sub-menu key="sub5">
    <template #title>
      <span>
        <notification-outlined />
        应用规模化
      </span>
    </template>
    <router-link to="/StateManagement">
      <a-menu-item key="25">状态管理</a-menu-item>
    </router-link>
  </a-sub-menu>
  <a-sub-menu key="sub6">
    <template #title>
      <span>
        <notification-outlined />
        进阶主题
      </span>
    </template>
    <router-link to="/DeepResponseSystem">
      <a-menu-item key="26">深入响应式系统</a-menu-item>
    </router-link>

    <router-link to="/CreateVnodeVue">
      <a-menu-item key="27">渲染函数</a-menu-item>
    </router-link>
  </a-sub-menu>
</template>
<script>
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from "@ant-design/icons-vue";

export default {
  components: {
    UserOutlined,
    LaptopOutlined,
    NotificationOutlined,
  },
};
</script>
